import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { ViewPort, Experimental, Layer, Centered, Positioned } from "../../";
import { blue, red } from "../Utils";
import { CommonHeader, description, PropsTable, Prop } from "../Utils";

<CommonHeader />

<Meta title="Components/Layer" component={Layer} />

## Layer

Groups child spaces and places them all at a certain `zIndex`. 

Spaces only interact with each other when they are in the same `zIndex`.

Spaces in a higher `zIndex` overlap spaces in a lower `zIndex`.

```tsx
<ViewPort>
	<Layer zIndex={2}>
		<LeftResizable size={200}>...</LeftResizable>
	</Layer>
	<Layer zIndex={1}>
		<Fill>...</Fill>
	</Layer>
</ViewPort>
```

In the example above, the `<Fill />` space size is not affected by the `<LeftResizable />` space because
they have been placed at different levels within the `<ViewPort />`. The `<LeftResizable />` space also
overlaps the `<Fill />` space because it is in a higher layer.

An alternate way of specifying the layer is by specifying a zIndex directly on the spaces:

```tsx
<ViewPort>
	<LeftResizable size={200} zIndex={2}>...</LeftResizable>
	<Fill zIndex={1}>...</Fill>
</ViewPort>
```

This is preferable when moving spaces between different layers without causing a remount on children
inside the space.

### Positioned spaces in different layers

<Canvas>
	<Story name="Default">
		<ViewPort>
			<Layer zIndex={1}>
				<Positioned style={blue} left={100} top={100} width={200} height={200}>
					{description("Positioned in layer with zIndex 1")}
				</Positioned>
				<Positioned style={blue} left={350} top={100} width={200} height={200}>
					{description("Positioned in layer with zIndex 1")}
				</Positioned>
			</Layer>
			<Layer zIndex={2}>
				<Positioned style={red} left={200} top={250} width={200} height={200}>
					{description("Positioned in layer with zIndex 2")}
				</Positioned>
				<Positioned style={red} left={450} top={250} width={200} height={200}>
					{description("Positioned in layer with zIndex 2")}
				</Positioned>
			</Layer>
		</ViewPort>
	</Story>
</Canvas>

### Properties

<Story name="Properties">
	<PropsTable>
		<Prop name="zIndex" type="number" description="zIndex to apply to all child spaces." />
	</PropsTable>
</Story>